<template>
  <div>
    <tm-coupon
      :data="props.item"
      @click="apply(props.item)"
      color="pink"
      linear="right"
      linear-deep="accent"
      mainColor="yellow"
      font-color=""
      :rightDetail="{
        title: props.item.couponType,
        subtitle: props.item.rangeDesc,
        time: props.item.startTime + '-' + props.item.endTime,
      }"
      :priceDetail="{
        price: props.item.amount,
        suffix: '元',
        prefix: '',
        subtext: '满减券',
      }"
      :btnLabel="props.item.isSelect ? '立即使用' : '已使用'"
      :disable="props.item.isSelect ? false : true"
    ></tm-coupon>
  </div>
</template>
<script setup lang="ts">
import tmCoupon from '@/tmui/components/tm-coupon/tm-coupon.vue'
import { ref, defineProps } from 'vue'
import { applyapi } from '@/api'
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
})
const emit = defineEmits(['apply'])

const CouponId = ref<number>() //优惠卷id
const amount = ref<number>(0) //减少金额
const apply = async (item: any): Promise<void> => {
  CouponId.value = item._id
  amount.value = item.amount

  await applyapi(item._id, item.couponStatus)
  emit('apply', item)
}
</script>
